<template>
<div>
<!--ref-->
    <p>年龄：{{age}}</p>
    <button @click="age++">增加年龄</button>
<!-- reactive -->
    <p>姓名:{{ user.name }}</p>
    <input placeholder="请输入姓名" v-model="user.name">
<!-- 城市 -->
<p>城市：{{city}}</p>
<input placeholder="请输入城市" v-model="city">
<!-- 邮箱 -->
<p>邮箱:{{ email }}</p>
<input placeholder="请输入邮箱" v-model="email">
 </div>
</template>
<script setup>
import { reactive, ref, toRef, toRefs } from 'vue';
const age=ref(25);
const user=reactive({
    name:"张三",
   address:{
    city:"北京",
    country:"中国"
  },
  email:"zhangsan@example.com"
})
//toRef 
const city=toRef(user.address,"city")
//const email=toRef(user.email,"email")
const {email}=toRefs(user)
//定时器
setTimeout(()=>{
    age.value++;
    user.name="李四";
    city.value="上海";
    email.value="lisi@exampie.com"
},3000)
</script>
<style scoped>
</style>